<template>
  <div>
    <div v-if="list" class="box">
      <van-nav-bar title="收藏" :right-text="isshow?'完成':'编辑'" fixed @click-right="onClickRight" style="background: #fee44e"/>

      <ul>
        <li v-for="item in list" :key="item.id">
          <input type="checkbox" :value="item.id" v-show="isshow" v-model="check" />
          <div class="imgs">
            <img :src="item.image" :alt="item.name" />
          </div>
          <div class="msg">
            <p class="p1" :class="isshow?'active2':'active1'">{{item.name}}</p>
            <p v-if="item.expireMsg" class="p2">{{item.expireMsg}}天后过期</p>
            <p v-else style="height: 20px"></p>
            <p class="p3">
              <span>
                券后¥
                <span class="price">{{item.price}}</span>
              </span>
              天猫
              <del>¥{{item.originPrice}}</del>
            </p>
            <p class="p4">
              <span v-if="item.couponValue" class="coupon">{{item.couponValue}}</span>
              <span v-else class="coupon">无券</span>
              <span class="saleNum" v-show="!isshow">已抢{{item.saleNum}}单</span>
            </p>
          </div>
        </li>
      </ul>
      <div class="foot" v-show="isshow">
        <span @click="remove(list.id)">移除收藏</span>
      </div>
    </div>

    <div v-else class="box1">
      <van-nav-bar title="收藏" fixed style="background: #fee44e"/>
      <p>
        <span @click="back">您还没有收藏任何优惠呢</span>
      </p>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar } from 'vant'

Vue.use(NavBar)

export default {
  data () {
    return {
      list: null,
      isshow: false,
      check: []
    }
  },
  mounted () {
    this.$store.commit("hide1")
    var res = JSON.parse(localStorage.getItem('shopping') || '[]')
    this.list = res
  },
  methods: {
    onClickRight () {
      this.isshow = !this.isshow
    },
    remove () {
      if (this.check !== []) {
        this.check.forEach(el => {
          for (var i = 0; i < this.list.length; i++) {
            if (this.list[i].id === el) {
              this.list.splice(i, 1)
              i--
            }
          }
        })
      }
      localStorage.setItem('shopping', JSON.stringify(this.list))
    },
    back () {
      this.$router.push('/homepage')
    }
  },
  updated () {
    if (this.list.length === 0 || this.list.length === null) {
      this.list = null
    }
  },
  destroyed() {
    this.$store.commit("show1")
  },
}
</script>

<style lang="scss" scoped>
ul {
  margin: 0;
  padding: 0;
  margin: -20px 8px 150px 8px;
}
li {
  list-style: none;
  display: flex;
  margin: 10px 0px;
  border: 1px solid #000;
  border-radius: 5px;
}
input {
  margin: 50px 5px 0px 10px;
}
.imgs {
  float: left;
  margin: 5px;
  img {
    display: block;
    width: 100px;
    border-radius: 5px;
  }
}
.active1 {
  width: 230px;
}
.active2 {
  width: 200px;
}
.msg {
  p {
    padding: 0;
    margin: 0;
  }
  float: right;
  margin-left: 10px;
  .p1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .p2 {
    font-size: 12px;
    margin: 5px 0px;
  }
  .p3 {
    font-size: 12px;
    margin: 5px 0px;
    span {
      color: #f00;
      margin-right: 5px;
      .price {
        font-size: 20px;
      }
    }
  }
  .p4 {
    .coupon {
      display: inline-block;
      text-align: center;
      width: 60px;
      height: 20px;
      background-color: #f00;
      font-size: 14px;
      color: #fff;
    }
    .saleNum {
      float: right;
      font-size: 12px;
      color: #666;
    }
  }
}
.foot {
  position: fixed;
  bottom: 45px;
  left: 0;
  width: 100%;
  background-color: rgb(233, 226, 226);
  text-align: center;
  span {
    display: inline-block;
    width: 100px;
    height: 30px;
    border: 1px solid #f00;
    line-height: 30px;
    margin: 10px 0;
    border-radius: 20px;
  }
}
.box1 {
  width: 100%;
  height: 560px;
  text-align: center;
  display: table;
  p {
    display: table-cell;
    vertical-align: middle;
    margin-top: 100px;
    background: url("/collect.jpg") no-repeat center / 80%;
    span {
      display: inline-block;
      background-color: rgb(255, 209, 3);
      padding: 10px 20px;
      border-radius: 20px;
      box-shadow: 3px 3px 5px #666;
    }
  }
}
</style>